﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <!-- Js References -->
    <script type="text/javascript" src="/joy/js/jquery-1.10.2"></script>
    <script type="text/javascript" src="/joy/js/jquery.json"></script>
    <script type="text/javascript" src="/joy/js/jquery.dom"></script>
    <script type="text/javascript" src="/joy/js/jquery.request"></script>
    <script type="text/javascript" src="/joy/js/jquery.form"></script>
    <script type="text/javascript" src="/joy/js/jquery.mouse"></script>
    <script type="text/javascript" src="/joy/js/jquery.upload"></script>
    <script type="text/javascript" src="/joy/js/controls.cell.Cell"></script>
    <!-- End of Js Reference -->
    <script type="text/javascript">
        $(function () {
            var box = $('#box').dom();
            var cfg = {
                childNodes: [
                    {nodeValue:'begin node'}
                    ,{ style: { color: 'green' } }
                    ,{nodeValue:'end node'}
                ],
                style: {
                    width: '100px', height: '100px'
                    , position: 'relative', display: 'block'
                    , backgroundColor: 'blue'
                }
                , test: {
                    child: {
                        son: 100
                    }
                    , daughter: 90
                }
                
            };
            cfg.recursive = cfg;
            joy.merge(box, cfg, joy.objmerge);
        });
        
    </script>
    <title></title>
</head>
<body>
    <div id="box">
        <div>beautiful</div>
    </div>
</body>
</html>